<template>
  <el-dialog :title="type===1 ? '选择设备' : '选择产品'" :visible.sync="visible" width="55%" :destroy-on-close="true" :before-close="handleClose">
    <div style="width: 96%; padding:0 2%">
      <div style="width: 100%">
        <el-form class="demo-form-inline" :inline="true">
          <el-form-item label="设备ID">
            <el-input placeholder="请输入ID" v-model="deviceId"></el-input>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input placeholder="请输入名称" v-model="deviceName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getDevices(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="width: 100%;margin: 10px;">
        <el-button type="primary" @click="allSelect()">全部选中</el-button>
        <el-button @click="selectCancel()">取消选中</el-button>
      </div>
      <div style="background-color: #0c0c0c;">
        <el-table style="width: 100%" :data="devices" slot="header">
          <el-table-column width="100" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isSelected" @change="change(scope.row, scope.$index)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" align="center"></el-table-column>
          <el-table-column prop="name" label="名称" align="center"></el-table-column>
<!--          <el-table-column prop="productName" label="产品名称" align="center"></el-table-column>-->
<!--          <el-table-column prop="registryTime" label="注册时间" align="center" :formatter="formatDate"></el-table-column>-->
<!--          <el-table-column prop="state.text" label="状态" align="center"></el-table-column>-->
        </el-table>
        <div style="display: flex;justify-content: flex-end;padding: 20px 20px 20px 0;">
          <el-pagination layout="total, prev, pager, next, jumper" background :total="list.length" :hide-on-single-page="true"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-size="pageSize"
          ></el-pagination>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {deviceListNoPage, productListNoPage} from "@/api/visual";
import {encodeQueryParam} from "@/utils/utils";
export default {
name: "device",
  data () {
    return {
      //用于搜索
      deviceId: '',
      deviceName: '',
      pageSize: 10,
      currentPage: 1,
      //获取的设备值
      device: {},
      deviceList: [],
      devices: [],
      list: []
    }
  },
  props: {
    visible: Boolean,
    data: Array,
    type: Number
  },
  mounted() {
    this.getDeviceList(1);
  },
  watch:{
    visible(){
      this.$nextTick(() => {
        if(this.visible){
          this.getDeviceList(1);
        }
      })
    }
  },
  methods: {
    handleClose(){
      this.$emit('update:visible', false);
    },
    change(device){
      this.deviceList.forEach(i => {
        if(i.id === device.id){
          i.isSelected = device.isSelected;
        }
      })
      this.getDevices(this.currentPage)
    },
    selectCancel(){
      this.deviceList.forEach(i => {
        i.isSelected = false
      })
      this.getDevices(1)
    },
    allSelect(){
      this.deviceList.forEach(i => {
        i.isSelected = true
      })
      this.getDevices(1)
    },
    cancel(){
      this.$emit('update:visible', false);
      this.deviceId = ''
      this.deviceName = ''
      this.deviceList = []
    },
    submit () {
      this.deviceId = ''
      this.deviceName = ''
      let data = this.deviceList.filter(item => {
        return item.isSelected === true
      })
      this.$emit('submit', data);
      this.$emit('update:visible', false);
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      this.getDevices(currentPage)
    },
    getDeviceList(){
      if(this.type === 1){
        deviceListNoPage(encodeQueryParam({})).then(res => {
          if(res.status === 200){
            this.deviceList = res.data.result
            let arr = []
            if(this.data !== undefined && this.data.length > 0){
              this.data.forEach(i => {
                arr.push(i.id)
              })
            }
            this.deviceList.forEach(item => {
              if(arr.indexOf(item.id) > -1){
                item.isSelected = true
              }else{
                item.isSelected = false
              }
            })
            this.getDevices(1)
          }else if(res.status == 401){
            this.$message.error('用户未登录');
          }else{
            console.log('获取设备列表失败')
          }
        })
      }else if(this.type === 2){
        productListNoPage(encodeQueryParam({})).then(res => {
          if(res.status === 200){
            this.deviceList = res.data.result
            let arr = []
            if(this.data !== undefined && this.data.length > 0){
              this.data.forEach(i => {
                arr.push(i.id)
              })
            }
            this.deviceList.forEach(item => {
              if(arr.indexOf(item.id) > -1){
                item.isSelected = true
              }else{
                item.isSelected = false
              }
            })
            this.getDevices(1)
          }else if(res.status == 401){
            this.$message.error('用户未登录');
          }else{
            console.log('获取产品列表失败')
          }
        })
      }else{
        this.deviceList = []
      }
    },
    getDevices(index){
      this.list = []
      index = (index-1)*10
      if(this.deviceId !== '' && this.deviceName !== ''){
        this.list = this.deviceList.filter(i => {
          return i.id.indexOf(this.deviceId) !== -1 && i.name.indexOf(this.deviceName) !== -1
        })
      }else if(this.deviceId !== '' && this.deviceName === ''){
        this.list = this.deviceList.filter(i => {
          return i.id.indexOf(this.deviceId) !== -1
        })
      }else if(this.deviceId === '' && this.deviceName !== ''){
        this.list = this.deviceList.filter(i => {
          return i.name.indexOf(this.deviceName) !== -1
        })
      }else{
        this.list = this.deviceList
      }
      this.devices = []
      for (let i = index; i < index + 10 && i < this.list.length; i++) {
        this.devices.push(this.list[i])
      }
    },
    formatDate(row, column){
      let data = row[column.property];
      if(data === ''){
        return
      }
      let dt = new Date(data);
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
    }
  }
}
</script>

<style scoped>

</style>
